
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>auto completer</title>
</head>


<style type="text/css">
body {
	font-family: Helvetica;
	font-size: 11px;
	color: #000;
}

h3 {
	margin: 0px;
	padding: 0px;
}

.suggestionsBox {
	position: relative;
	left: 30px;
	margin: 10px 0px 0px 0px;
	width: 200px;
	background-color: #212427;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #000;
	color: #fff;
}

.suggestionList {
	margin: 0px;
	padding: 0px;
}

.suggestionList li {
	margin: 0px 0px 3px 0px;
	padding: 3px;
	cursor: pointer;
}

.suggestionList li:hover {
	background-color: #659CD8;
}
</style>




<script src="/scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        jQuery.post("/demo/ajax/auto-completer.html", {typeValue: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $('#inputString').val(thisValue);
   $('#suggestions').hide();
}
</script>


<body>
<div>

<div>Type your county (for the demo): <input size="30"
	id="inputString" onkeyup="lookup(this.value);" type="text" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="/demo/ajax/auto-completer/image/upArrow.png"
	style="position: relative; top: -12px; left: 30px" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList"></div>
</div>
</div>
</body>


